<template>
    <div class="main">
        <div class="login suspension">
            <div class="login-text">
               登    录
            </div>
            <div style="margin-left: 30px;">
                <div style="margin-top: 14px;">
                    <el-tag>账号</el-tag>
                    <el-input style="width: 90%;" v-model="data.account" ></el-input>
                </div>
                <div style="margin-top: 14px;">
                    <el-tag>密码</el-tag>
                    <el-input type="password" style="width: 90%;" v-model="data.password" ></el-input>
                </div>
                <div style="margin-top: 16px;">
                    <el-button style="width: 90%;" block type="primary" @click="events.login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import  {reactive}  from 'vue';
import { useRouter } from 'vue-router';
import { logins } from '@/api/login';
import type { logins_Dto } from '@/Dto/Request/login/logins_Dto';
import { ElMessage } from 'element-plus';
import Api_Code from '@/Dto/Response/Api_code';
import { set_token } from '@/utils/auth';
import { closeloading, startloading } from '@/utils/loading';


const router=useRouter();

const data = reactive<logins_Dto>({
    account: '13100252953',
    password: '000000'
})
const events={
    async login(){
        startloading();
        const res = await logins({
            account: data.account,
            password: data.password
        });
        console.log(res.code,"::::::::")
        if (res.code=== Api_Code.ok) {
            closeloading();
            set_token(res.data.toString());
            router.push('/')     
        } else {
            ElMessage.error(res.message);
        }
    }
}

</script>

<style scoped>
body {
    margin: 0;
    padding: 0;
}
.main {
    width: 100vw;
    height: 100vh;
    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
    background-image:url("@/assets/images/login.png");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    
}

.login {
    width: 350px;
    height: 260px;
    margin: 0 auto;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 8px;
    position: relative;
    top: 180px;
}

.login-text {
    color: #09386e;
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
    font-size: 26px;
    font-weight: 600;
}
.suspension {
  transition: all 0.3s ease;
}

.suspension:hover {

  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 24px #0003;
}

</style>